import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import { Modal } from 'antd'
import {connect} from 'react-redux'

import LinkButton from '../link-button'
import { reqWeather } from '../../api'
import menuList from '../../config/menuConfig'
import { formateDate } from '../../utils/dateUtils'

import './index.less'
import {logout} from  '../../redux/actions'
import { async } from 'q';

/*
顶部导航的组件
*/
class Header extends Component {

    state = {
        currentTime: formateDate(Date.now()),   //当前时间字符串
        dayPictureUrl: '',   //天气的图片 url
        weather: '',   //天气的文本
    }

    getTime = () => {
        //每隔 1s 获取当前时间，并更新状态数据 currentTime
        this.intervalId=setInterval(() => {
            const currentTime = formateDate(Date.now())
            this.setState({ currentTime })
        }, 1000)
    }

    getWeather = async () => {
        //调用接口请求异步获取数据
        const { dayPictureUrl, weather } = await reqWeather('西安')
        //更新状态
        this.setState({ dayPictureUrl, weather })
    }

    getTitle = () => {
        //得到当前请求路径
        const path = this.props.location.pathname
        let title
        menuList.forEach(item => {
            if (item.key === path) {
                title = item.title
            } else if (item.children) {
                //在所有的子 item 中查找匹配的
                const cItem = item.children.find(cItem => path.indexOf(cItem.key)===0)
                //如果有值才说明匹配
                if (cItem) {
                    //取出它的 title
                    title = cItem.title
                }
            }
        })
        return title
    }

    //退出登录
    logout = () => {
    //显示确定框
    Modal.confirm({
        content:'确认退出吗？',
        onOk:()=>{
           //console.log('OK')
           this.props.logout( )
           //跳转到 login
           //this.props.history.replace('/login')
        }
    })
    }


    /*
    第一次 render() 之后执行一次
    一般在此执行异步操作：发 ajax 请求/启动定时器
    */
    componentWillMount() {
        //获取当前时间
        this.getTime()
        //获取当前天气显示
        this.getWeather()
    }

    //当前组件卸载之前调用
    componentWillUnmount(){
        //清除定时器
        clearInterval(this.intervalId)
    }

    render() {

        const { currentTime, dayPictureUrl, weather } = this.state

        const username = this.props.user.username
        //得到当前需要显示的 title
        //const title = this.getTitle()
        const title =this.props.headTitle
        
        return (
            <div className='header'>
                <div className="header-top">
                    <span>欢迎，{username}</span>
                    <LinkButton onClick={this.logout}>退出</LinkButton>
                </div>
                <div className="header-bottom">
                    <div className="header-bottom-left">{title}</div>
                    <div className="header-bottom-right">
                        <span>{currentTime}</span>
                        <img src={dayPictureUrl} alt="weather" />
                        <span>{weather}</span>
                    </div>
                </div>
            </div>
        )
    }
}

export default connect(
    state=>({headTitle:state.headTitle,user:state.user}),
    {logout}
)(withRouter(Header)) 